<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>用户充值</title>
    <script type="text/javascript">
		(function () {
		    //设置页面的rem大小
		    document.addEventListener('DOMContentLoaded', function () {
		        var html = document.documentElement;
		        var windowWidth = html.clientWidth;
		        html.style.fontSize = windowWidth /7.5 + 'px';
		    }, false);
		    window.onresize = function(){
		        var html = document.documentElement;
		        var windowWidth = html.clientWidth;
		        html.style.fontSize = windowWidth /7.5 + 'px';
		    };
		})();
	</script>
    <style type="text/css">
	    html {
			font-family: sans-serif;
			line-height: 1.15;
			-ms-text-size-adjust: 100%;
			-webkit-text-size-adjust: 100%
		}

		body {
			margin: 0
		}
	    a {
			background-color: transparent;
			-webkit-text-decoration-skip: objects
		}

		a:active,a:hover {
			outline-width: 0
		}
	    ul,li{
			list-style: none;
			list-style-type: none;
			margin:0;
			padding:0;
		}
		.g-flex {
		    display: -webkit-flex;
		    display: -ms-flexbox;
		    display: flex;
		}

		.g-flex-auto {
		    -webkit-flex: 1;
		    -moz-flex: 1;
		    flex: 1;
		}
    	.rechargeBox{
    		padding:.35rem;
    	}
    	.rechargeBox ul {
    		flex-wrap: wrap;
    		width: 100%;
    	}
    	.rechargeBox ul li{
    		text-align: center;
    		font-size: .3rem;
    		color: #000;
    		flex: 0 0 33.3%;
    		line-height: 1.55rem;
    	}
    	.rechargeItem{
    		margin:0 .175rem .35rem;
    		display: block;
    	}
    	.rechargeItem span{
    		display: block;
    		border:1px solid #dcdcdc;
    		height: 1.55rem;
    		overflow:hidden;
    	}
    	.rechargeItem em{
    		color: #ff6021;
    		font-size: .5rem;
    		font-style: normal;
    	}
    	.rechargeItem input[type="radio"]{
    		display: none;
    	}
    	.rechargeItem input[type="radio"]:checked + span{
    		border:1px solid #337ae4;
    		background: url('__PUBLIC__/imgs/select_cur.png') no-repeat right bottom;
    		background-size: .49rem;
    	}
    	.payBox{
    		width: 100%;
    		position: fixed;
    		bottom: .5rem;
    		left: 0;
    	}
    	.btn_forpay{
    		display: block;
    		text-decoration: none;
    		background: url('__PUBLIC__/imgs/btn_forpay.png') no-repeat left center;
    		background-size: 100%;
    		width: 6.3rem;
    		height: .9rem;
    		text-align: center;
    		line-height: .9rem;
    		color: #fff;
    		font-size: .4rem;
    		margin: 0 auto;
    	}
    </style>
</head>
<body>
<div id="recharge">
	<div class="rechargeBox">
		<ul class="g-flex">
			<!-- <li class="g-flex-auto" v-for="(rechargeItem, index) in rechargeList">
				<label class="rechargeItem">
					<input type="radio" name="money" :value="rechargeItem.money"  v-model="select_cur">
					<span><em v-text="rechargeItem.money"></em>元</span>
				</label>
			</li> -->
			<li class="g-flex-auto">
				<label class="rechargeItem">
					<input type="radio" name="money" value="5" checked>
					<span><em>5</em>元</span>
				</label>
			</li>
			<li class="g-flex-auto">
				<label class="rechargeItem">
					<input type="radio" name="money" value="10">
					<span><em>10</em>元</span>
				</label>
			</li>
			<li class="g-flex-auto">
				<label class="rechargeItem">
					<input type="radio" name="money" value="15">
					<span><em>15</em>元</span>
				</label>
			</li>
			<li class="g-flex-auto">
				<label class="rechargeItem">
					<input type="radio" name="money" value="30">
					<span><em>30</em>元</span>
				</label>
			</li>
			<li class="g-flex-auto">
				<label class="rechargeItem">
					<input type="radio" name="money" value="50">
					<span><em>50</em>元</span>
				</label>
			</li>
			<li class="g-flex-auto">
				<label class="rechargeItem">
					<input type="radio" name="money" value="100">
					<span><em>100</em>元</span>
				</label>
			</li>

		</ul>
	</div>
	<div class="payBox">
		<a href='javascript:void(0);' class="btn_forpay" onclick="pay()">支付宝支付</a>
	</div>
</div>
<script src="__PUBLIC__/js/zepto.js"></script>
<!-- <script src="js/vue.js"></script> -->
<script id='spay-script' src='https://jspay.beecloud.cn/1/pay/jsbutton/returnscripts?appId=2223704e-c58a-4272-b8a8-34344f3f613d'></script>
<script>
    function pay(){
        var vid="<?php echo $_GET['vid'];?>";
        var money=$("input[type=radio]:checked").val();
//        alert(money);
        if($("input[type=radio]:checked").is(':checked')==false){
            alert('请选择充值金额');
            return false;
        }
        $.post('https://yapi.miaodaoxj.com/Recharge/to_pay',{money:money,vid:vid},function(data){
            console.log(data);
            if(data.code=='1001'){
//                alert(data);
                var data=data.result;
                asyncPay(data.title,data.money,data.orderno,data.sign);
            }else{
//                alert('fail');
                alert(data.result);
            }
        });
    }
    function bcPay(title,amount,sn,sign) {
        var to_url='http://xbqb.93bus.com/Recharge/pay';
        // var amount=parseInt(amount);
        BC.click({
            "title":title,
            "amount":amount,
            "out_trade_no":sn, //唯一订单号
            "sign" :sign,
            'instant_channel':'ali',
//            'return_url':to_url
        });
    }

    function asyncPay(title,amount,sn,sign) {
        if (typeof BC == "undefined") {
            if (document.addEventListener) { // 大部分浏览器
                document.addEventListener('beecloud:onready', bcPay, false);
            } else if (document.attachEvent) { // 兼容IE 11之前的版本
                document.attachEvent('beecloud:onready', bcPay);
            }
        } else {
            bcPay(title,amount,sn,sign);
        }
    }
</script>
<script type="text/javascript">


//	function btn_forpay(){
//		//获取选中的充值金额
//		var  select_cur = $(".rechargeBox ul li").find("input[type=radio]:checked").val();
//		console.log(select_cur)
//	}






	// var vm = new Vue({
	// 	el:"#recharge",
	// 	data:{
	// 		rechargeList:[],//充值列表
	// 		select_cur:null,//选中的充值金额
	// 	},
	// 	created:function(){
	// 		ret = JSON.parse(data);
	// 		// $.post(
	// 		// 	"http://xbqb.93bus.com/Finance/price_list"
	// 		// 	,function(data){
	// 		// 		ret = JSON.parse(data);
	// 		// 		if(ret['ret'] == 1001){
	// 		// 			vm.rechargeList = ret['data'];
	// 		// 		}else{
	// 		// 			alert("充值列表加载失败")
	// 		// 		}
	// 		// 	}
	// 		// )
	// 	},
	// })
</script>
</body>
</html>